<template>
    <div class="wrap">
      <el-collapse v-model="activeName">
        <el-collapse-item title="基本信息" name="1">
          <div class="collapse-item-container" >
            <div v-for="(item, index) in formItems.basic" class="collapse-item">
              <div class="collapse-item-label">{{item.label}}：</div>
              <div class="collapse-item-content">{{order&&order[item.name]}}</div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="附件清单" name="2">
          <div class="collapse-item-container" >
            <div v-for="(item, index) in formItems.attachments" class="collapse-item">
              <div class="collapse-item-label">{{item.label}}：</div>
              <div class="collapse-item-content">{{order&&order[item.name]}}</div>
            </div>
            <div class="collapse-item">
              <div class="collapse-item-label">出车信息表</div>
              <div class="collapse-item-content"><a target="_blank" href="/"> <i class="el-icon-document">点击查看</i> </a></div>
            </div>
            <div class="collapse-item">
              <div class="collapse-item-label">委运合同</div>
              <div class="collapse-item-content"><a target="_blank" href="/"> <i class="el-icon-document">点击查看</i> </a></div>
            </div>
            <div class="collapse-item">
              <div class="collapse-item-label">货险信息</div>
              <div class="collapse-item-content"><a target="_blank" href="/"> <i class="el-icon-document">点击查看</i> </a></div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <div class="btn-container">
        <el-button type="primary" @click="goRepayment">还款</el-button>
        <el-button type="info" @click="goOrderList">返回</el-button>
      </div>
    </div>
</template>

<script>
  import MyForm from '../../../components/MyForm';
  import * as selectDatas from '../../../constants/select-datas';

  const formItems ={
    basic:[
//    订单编号		字符串
//    企业名称		字符串
//    出车信息		字符串
//    申请金额		数值
//    贷款时间		日期
      {
        name:'orderNo',
        label:'订单编号'
      },
      {
        name:'amount',
        label:'贷款金额'
      },
      {
        name:'status',
        label:'订单状态'
      },
      {
        name:'productType',
        label:'贷款产品类型'
      },
      {
        name:'rate',
        label:'贷款利率'
      },
      {
        name:'accountPeriod',
        label:'还款账期'
      },
      {
        name:'createDate',
        label:'贷款时间'
      },
      {
        name:'paybackTime',
        label:'应还时间'
      },
      {
        name:'paybackActualTime',
        label:'实际还款时间'
      },
      {
        name:'paybackAmount',
        label:'到期应还'
      }
//    还款时间		日期
//    利息		数值
//    贷款产品		字符串
    ],
    attachments:[

    ]

  };


    export default {
        name: 'OrderView',
      props:{
        order: Object,
        required: true,
      },
      components:{
        MyForm
      },
      created(){

      },
      watch:{

      },
      data() {
          return {
            activeName: '1',
            formItems: formItems,
            labelWidth: "180px",
          }
      },
      computed:{

      },
      methods:{
        goRepayment(){
          this.$emit('goRepayment')
        },
        goOrderList(){
          this.$emit('goOrderList')
        },
      }
    }
</script>

<style lang="stylus" scoped>
  .collapse-item-container
    display flex
    flex-direction row
    flex-wrap wrap
  .collapse-item
    font-size 16px
    width 90%
    display flex
    flex-direction row
    margin 10px
  .collapse-item-label
    display flex
    font-weight bold
    margin-left 50px
    justify-content flex-end
    width 150px
  .collapse-item-content
    display flex
    flex 1

  .btn-container
    margin-top: 15px
    margin-left: 180px
</style>
